<template>
    <div class="move-table-container">
        <table-view class="pager-square" stripe
            :tablehead="tableHead"
            :loading="localLoading"
            :total="total"
            :filter="pageInfo"
            :tabledata="list"
            @on-load="loadList">
            <span slot="originGroupName" slot-scope="{row}">{{ row.originGroupName }}</span>
            <span slot="targetGroupName" slot-scope="{row}">{{ row.targetGroupName }}</span>
            <span slot="userNum" slot-scope="{row}">{{ row.userIdList.length }}</span>
            <span slot="applyTime" slot-scope="{row}">{{ row.applyTime }}</span>
            <section slot="status" slot-scope="{row}">
                <span v-if="row.moveStatus === '0'">
                    <i class="icon-warning"></i>
                    待处理
                </span>
                <span v-if="row.moveStatus === '1'">
                    <i class="icon-success"></i>
                    同意接收
                </span>
                <span v-if="row.moveStatus === '2'">
                    <i class="icon-reject"></i>
                    拒绝接收
                </span>
                <span v-if="row.moveStatus === '3'">
                    <i class="icon-error"></i>
                    已取消
                </span>
                <span v-if="row.moveStatus === '4'">
                    <i class="icon-error"></i>
                    移动失败
                </span>
            </section>
            <section slot="result" slot-scope="{row}">
                <span v-if="row.moveResult === '0'">-</span>
                <span v-if="row.moveResult === '1'">迁入成功</span>
                <span v-if="row.moveResult === '2'">迁入失败</span>
            </section>
            <section slot="operator" slot-scope="{row}">
                <el-button type="text" size="small" @click="queryMoveUserList(row.id)">查看转移人员</el-button>
                <!-- 迁入并且状态为待处理 -->
                <el-button v-if="action === 'in' && row.moveStatus === '0'" type="text" size="small" @click="showTackleMove(row.id)">处理请求</el-button>
                <!-- 迁出并且状态为待处理 -->
                <el-button v-if="action === 'out' && row.moveStatus === '0'" type="text" size="small" @click="cancelUserMove(row.id)">取消转移</el-button>
            </section>
        </table-view>
        <custom-dialog
            :width="600"
            :height="419"
            :showCancel="false"
            :visible="showMoveUsers"
            @on-confirm="showMoveUsers = false"
            @on-cancel="showMoveUsers = false"
            title="查看转移人员">
            <div class="move-user-list">
                <el-tag type="danger" v-for="item in moveUsers" :key="item.id">{{ item.name }}</el-tag>
            </div>
        </custom-dialog>
        <custom-dialog
            :width="400"
            :height="186"
            :visible="showTackle"
            @on-confirm="tackleMove"
            @on-cancel="showTackle = false"
            title="处理申请">
            <div class="tackle-move-container">
                <el-radio-group v-model="tackleResult">
                    <el-radio label="1">同意接收</el-radio>
                    <el-radio label="2">拒绝接收</el-radio>
                </el-radio-group>
            </div>
        </custom-dialog>
    </div>
</template>
<script>
import tableView from 'party_fe_component/src/components/tableView';
import CustomDialog from '@/views/components/dialog';
import { queryMoveUserList, cancelUserMove, tackleMove } from '../common/api';
export default {
    props: {
        action: {
            type: String,
            default: 'in'
        },
        loading: {
            type: Boolean,
            default: false
        },
        total: {
            type: Number,
            default: 0
        },
        list: {
            type: Array,
            default: () => { return []; }
        },
        pageInfo: {
            type: Object,
            default: () => { return { page: 1, pageSize: 10 }; }
        }
    },
    data () {
        const { loading } = this;
        return {
            localLoading: loading,
            moveUsers: [],
            tackleMoveId: null,
            tackleResult: '1',
            showTackle: false,
            showMoveUsers: false,
            tableHead: [
                {
                    slot: 'originGroupName',
                    label: '发起组织'
                },
                {
                    slot: 'targetGroupName',
                    label: '目标组织'
                },
                {
                    slot: 'userNum',
                    label: '转移人员数'
                },
                {
                    slot: 'applyTime',
                    label: '提出申请时间'
                },
                {
                    slot: 'status',
                    label: '处理状态'
                },
                {
                    slot: 'result',
                    label: '转移结果'
                },
                {
                    slot: 'operator',
                    label: '操作'
                }
            ]
        };
    },
    methods: {
        loadList (pageInfo) {
            this.$emit('refresh-list', pageInfo);
        },
        tackleMove () {
            const { tackleMoveId, tackleResult } = this;
            this.localLoading = true;
            tackleMove(tackleMoveId, tackleResult).then((data) => {
                this.showTackle = false;
                this.tackleResult = '1';
                this.$emit('refresh-list');
            }).finally(() => {
                this.localLoading = false;
            });
        },
        showTackleMove (id) {
            this.tackleMoveId = id;
            this.showTackle = true;
        },
        cancelUserMove (id) {
            this.$x.confirm('<div class="cont"><p class="title">确定取消该批人员转移吗？</p> </div>', '取消转移', {
                type: 'error',
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                customClass: 'cancel-user-move-dialog',
                dangerouslyUseHTMLString: true
            }).then(t => {
                this.localLoading = true;
                cancelUserMove(id).then((data) => {
                    this.$emit('refresh-list');
                }).finally(() => { this.localLoading = false; });
            });
        },
        queryMoveUserList (id) {
            this.localLoading = true;
            queryMoveUserList(id).then(({ data } = {}) => {
                if (data) {
                    this.moveUsers = data;
                    this.showMoveUsers = true;
                }
            }).finally(() => { this.localLoading = false; });
        }
    },
    components: { tableView, CustomDialog }
}
</script>
<style scoped lang="scss">
    .move-table-container {
        /deep/ {
            .move-user-list {
                width: 100%;
                height: 100%;
                padding-bottom: 10px;
                border: 1px solid #ddd;
                overflow-x: hidden;
                overflow-y: auto;
            }
        }
    }
    .tackle-move-container {
        width: 100%;
        text-align: center;
    }
</style>
